<template>
    <div class="sifter-box flex-row-center" v-if="isEdit==0">
        <el-form :inline="true" :model="sifterForm" class="demo-form-inline">
            <el-form-item label="筛选：">
                <el-input v-model="sifterForm.key" placeholder="输入招聘会关键字" @input="proxy.$utils.debounce(updalist,sifterForm)"></el-input>
            </el-form-item>
            <el-form-item prop="issign">
                <el-select style="width:120px;" v-model="sifterForm.issign" placeholder="请选择" clearable @change="(e)=>{typeChange(e,'issign')}">
                    <el-option v-for="item in globalData.issignTypeAry" :key="item.value" :label="item.text" :value="item.value">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-date-picker style="width:200px;" v-model="sifterForm.time" type="daterange" value-format="YYYY-MM-DD" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" align="right" size="small" @change="datePickerChange" @clear="datePickerChange"></el-date-picker>
            </el-form-item>
        </el-form>
        <div>
        </div>
    </div>

    <div class="listDiv" v-if="isEdit==0">
        <el-table :data="list" stripe style="width: 100%">
            <el-table-column prop="title" label="招聘会名称"> </el-table-column>
            <el-table-column prop="address" label="地点"> </el-table-column>
            <el-table-column prop="man" label="联系人"> </el-table-column>
            <el-table-column prop="mobile" label="联系电话" width="120"> </el-table-column>
            <el-table-column prop="starttime" label="开始时间" width="110"> </el-table-column>
            <el-table-column prop="endtime" label="结束时间" width="110"> </el-table-column>
            <el-table-column prop="" label="状态" width="110"> 
                <template #default="props">
                    <span :class="[fix(props.row).label]">{{fix(props.row).text||''}}</span>
                </template>
            </el-table-column>
            <!-- <el-table-column prop="signCou" label="报名人数"> </el-table-column> -->
            <el-table-column prop="" label="详情" width="100">  
                <template #default="props">
                    <span v-if="props.row.isme!=0" class="pointer mr10 base-color" @click="editData(props.row)">查看详情</span>
                </template>
            </el-table-column>
            <el-table-column prop="" label="操作" width="150">
                <template #default="props">
                    <div v-if="proxy.$utils.checkMeetTime(Date.now(),props.row.starttime,props.row.endtime)<=1">
                        <el-popover show-arrow placement="top" v-model:visible="popovervisibles[`visible${props.row.id}`]" trigger="click" :width="300" @show="popoverShow(props.row)" :key="props.row.id">
                            <el-form ref="sign_ruleFormRef" :inline="true" :model="sign_form" label-width="120px" class="demo-ruleForm">
                                <el-form-item class="w96" :rules="[ { required: true, message: '日期不能为空'} ]" :label="issign?'参加日期':'取消日期'" prop="day">

                                    <el-date-picker v-if="issign" v-model="sign_form.day" type="date" value-format="YYYY-MM-DD" placeholder="选择参加日期" :disabled-date="disabledDate"></el-date-picker>
                                
                                    <el-select v-if="!issign" v-model="sign_form.day" placeholder="请选择取消日期" clearable>
                                        <el-option v-for="item in issigndays" :key="item.value" :label="item.text" :value="item.value" :disabled="item.disabled">
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                            </el-form>
                            <div style="text-align: right; margin: 0">
                                <el-button size="small" type="primary" @click="celsign">取消</el-button>
                                <el-button size="small" type="primary" @click="sign(props.row)">确认</el-button>
                            </div>
                            <template #reference>
                                <div> 
                                    <span :class="['pointer','mr10','base-color']" @click="show(props.row,true)">报名</span>
                                    <span v-if="props.row.days" :class="['pointer','mr10','success-color']" @click="show(props.row,false)">取消报名</span>
                                </div>
                            </template>
                        </el-popover>
                    </div>
                </template>
            </el-table-column>
        </el-table>
        <div class="pd20 w100 flex-row-center ju-flex-end">
            <el-pagination
                v-model:currentPage="sifterForm.currentpage"
                v-model:page-size="sifterForm.pagesize"
                :page-sizes="[10, 20, 50, 100]" :total="total"
                @size-change="()=>{updalist()}"
                @current-change="()=>{updalist()}"
                layout="total, sizes, prev, pager, next, jumper"  background/>
        </div>
    </div>

    <div class="edit-box" v-if="isEdit!=0">
        <div class="title-box flex-row-center">
            <span class="pointer return flex-row-center mr10" @click="re_turn"><el-icon><back /></el-icon></span>
            <span>招聘会详情</span>
        </div>
        <div class="form-box">
            <div class="head-title flex-row">
                <div class="flex-column ml10 head-title">
                    <span class="title mb10">{{detail.title||''}}</span>
                </div>
            </div>
            <div class="flex-row-center ju-flex-end mt10 mb10 base-gray-size">
                <span class="base-size mr10 flex-row-center"><el-icon class="mr5"><position /></el-icon>{{detail.address}}</span>
                <span class="base-size mr10 flex-row-center"><el-icon class="mr5"><user /></el-icon>{{detail.man}}</span>
                <span class="base-size mr10 flex-row-center"><el-icon class="mr5"><phone /></el-icon>{{detail.mobile}}</span>
                <span class="base-size mr10 flex-row-center"><el-icon class="mr5"><timer /></el-icon>{{detail.starttime}} ~ {{detail.endtime}}</span>
            </div>
            <div class="line mb20"></div>
            <div v-html="detail.msg"></div>
        </div>
    </div>

</template>

<script setup>
    import { reactive,ref,getCurrentInstance,toRefs,toRaw,computed } from 'vue'
    import { Back,Edit,Delete,Timer,Phone,User,Position } from '@element-plus/icons-vue'
    import Editer from '../../components/editer.vue'
    let { proxy } = getCurrentInstance()
    let obj = reactive({
        fileurl: proxy.$setting.globalUrl.fileurl,
        isEdit: 0,
        total: 0,
        list:[],
        sifterForm: {
            key: '',
            type: '',
            "issign":"",
            "time": "",
            "starttime":"",
            "endtime":"",
            currentpage: 1,
            pagesize: 10
        },
        detail: {},
        sign_form: {
            "jobfair_id":"",
            "day":""
        },
        sign_ruleFormRef: null,
        popovervisible: false,
        popovervisibles: {},
        sign_start_time: 0,
        sign_end_time: 0,
        sign_days_times: [],
        issign: false,
        issigndays: [],
    });

    const show = (row,sign)=>{
        issign.value = sign
        sign_form.value = {
            "jobfair_id":"",
            "day":""
        }
        if(row.days){
            let days = row.days.split(',');
            issigndays.value = []
            days.map(e=>{
                let o = {
                    text: e,
                    value: e,
                    disabled: (new Date().getTime()+86400000) > new Date(e).getTime()
                }
                issigndays.value.push(o);
            })
        }
        celsign()
        popovervisibles.value[`visible${row.id}`] = true
    }

    const fix = computed(() => {
        return (x) => {
            // if(x.complete == 1) return {text:"完成",color:'success-color',label:'label-btn-success'}
            let start = new Date(x.starttime), end = new Date(x.endtime), now = new Date()
            if (start > now) return {text:"尚未开始",color:'gray-color',label:'label-btn-warning'}
            if (end < now) return {text:"已结束",color:'gray-color',label:'label-btn-info'}
            return {text:"进行中",color:'base-color',label:'label-btn-success'}
        }
    })

    const celsign = ()=>{
        for (const key in popovervisibles.value) {
            if (Object.hasOwnProperty.call(popovervisibles.value, key)) {
                popovervisibles.value[key] = false  
            }
        }
    }

    const popoverShow = (row) => {
        sign_start_time.value = new Date(row.starttime).getTime()
        sign_end_time.value = new Date(row.endtime).getTime()
    }

    const disabledDate = (time) => {
        let issign = false//是否已经报名
        issigndays.value.map(e=>{
            const y = time.getFullYear()
            const m = time.getMonth()+1
            const d = time.getDate()
            issign = e.value == `${y}-${m>9?m:'0'+m}-${d>9?d:'0'+d}` ? true : issign
        })
        let disabled = (time.getTime()+46400000) <= sign_start_time.value || time.getTime() >= sign_end_time.value || time.getTime() < (Date.now() + 86400000) || issign
        return disabled
    }

    const typeChange = (e,key)=>{
        if(e){
            sifterForm.value[key] = e
            updalist(obj.sifterForm)
        }else{
            sifterForm.value[key] = ''
            updalist(obj.sifterForm)
        }
    }
    
    const datePickerChange = (e)=>{
        console.log(e);
        
        sifterForm.value.starttime = e?e[0]:''
        sifterForm.value.endtime = e?e[1]:''
        updalist(sifterForm.value)
    }

    const updalist = (form)=>{
        let param = {
            ...obj.sifterForm,
            ...form
        }
        proxy.$ajax({url: 'jobfair/list',data: param,bfLoading: true}).then(d => {
            console.log(d);
            if(d.success){
                total.value = d.msg.count||0
                list.value = d.msg.list;
                list.value.map(e=>{
                    popovervisibles.value[`visible${e.id}`] = false
                })
            }else{}
        }).catch(e => {
            console.log(e)
            if(e == "登录已过期，请重新登录"){
                proxy.routerPushMixin('/')
            }
        })
    }
    updalist();

    const re_turn = ()=>{
        isEdit.value = 0;
    }

    const editData = (item)=>{
        console.log(item);
        if(item){
            detail.value = item
            isEdit.value = 1
        }
    }

    const sign = (row)=>{
        if (sign_ruleFormRef) {
            sign_ruleFormRef.value.validate((valid) => {
                if (valid){
                    if(row.id){
                        let param = {
                            ...sign_form.value,
                            jobfair_id: row.id,
                        }
                        proxy.$ajax({url: 'jobfair/sign',data:param,bfLoading: true}).then(d => {
                            console.log(d);
                            if(d.success){
                                proxy.elMessageMixin('成功！', 'success')
                                sign_form.value = {
                                    "jobfair_id":"",
                                    "day":""
                                }
                                popovervisibles.value[`visible${row.id}`] = false
                                updalist()
                            }else{proxy.elMessageMixin(date.err, 'error')}
                        }).catch(e => {
                            console.log(e)
                            if(e == "登录已过期，请重新登录"){
                                proxy.routerPushMixin('/')
                            }
                        })
                    }
                } else {
                    return false;
                }
            });
        }
    }
    
    let { list, sifterForm, isEdit, total, fileurl, detail,sign_form,sign_ruleFormRef,sign_start_time,sign_end_time,popovervisible,sign_days_times,issign,issigndays,popovervisibles} = toRefs(obj)
</script>

<style lang="scss" scoped>
</style>